import { ref, inject } from "vue";
import { publishAnswer, deleteAnswer as deleteAnswerApi, updateAnswer, adoptAnswer as adoptAnswerApi } from "@/api/modules/sys";
import { dialogForm } from "@/utils/dialogForm";
import { QA } from "@/constants";
import { useHandleData } from "@/hooks/useHandleData";
import { ElMessage } from "element-plus";

export const useAnswer = (options: any) => {
  const { initAnswer, questionId } = options;
  const urlResource = inject("urlResource") as any;
  let drawerVisible = ref(false);
  let config = ref<any>({ width: 60 });

  // 新增回答
  const addAnswer = () => {
    drawerVisible.value = true;
    config.value.message = "添加成功";
    config.value.title = "添加回答";
    config.value.form = {
      formData: {
        content: "",
        reward: undefined,
        answerImgModels: [],
        answerFileModels: [],
        questionId
      },
      rules: {
        content: [{ required: true, message: "请填写回答内容" }],
        answerImgModels: [{ required: true, message: "请上传回答图片" }]
      }
    };
    config.value.column = [
      {
        type: "input",
        key: "content",
        formItemAttribute: {
          label: "回答内容"
        },
        attributes: {
          placeholder: "请填写回答内容",
          type: "textarea",
          rows: 5
        }
      },
      {
        type: "file",
        key: "answerImgModels",
        formItemAttribute: {
          label: "回答图片"
        },
        attributes: {
          "prefix-data": QA,
          multiple: true,
          showFileList: true,
          limit: 30,
          width: "140px",
          height: "140px",
          type: "image",
          listType: "picture-card",
          fileType: ["image/jpeg", "image/png", "image/gif"]
        }
      },
      {
        type: "fileSlice",
        key: "answerFileModels",
        formItemAttribute: {
          label: "上传附件文件"
        },
        attributes: {
          "prefix-data": QA,
          "limit-number": 100,
          accept: "*",
          success: data => {
            console.log(data);
          }
        }
      }
    ];
    config.value.api = publishAnswer;
    config.value.transformData = (data: any) => {
      data.answerImgModels = data.answerImgModels.map((item: any) => {
        return {
          name: item.originalFileName || item.name,
          path: item.path
        };
      });
      data.answerFileModels = data.answerFileModels.map((item: any) => {
        return {
          name: item.originalFileName || item.name,
          path: item.path
        };
      });

      return data;
    };
    dialogForm({
      config: config.value,
      drawerVisible: drawerVisible.value,
      successCallback: () => {
        initAnswer();
      }
    });
  };

  // 编辑回答
  const editAnswer = (initData: any) => {
    initData = JSON.parse(JSON.stringify(initData));
    // 处理图片默认值
    initData.answerImgModels = initData.answerImgModels.map((item: any) => {
      item.url = urlResource + item.path;
      return item;
    });
    // 处理文件默认值
    initData.answerFileModels = initData.answerFileModels.map((item: any, index: number) => {
      return {
        originalFileName: item.name,
        path: item.path,
        name: item.name,
        status: "preview",
        uploadedSize: 0,
        progress: 1000,
        md5: index + 1,
        uid: index + 1
      };
    });

    drawerVisible.value = true;
    config.value.message = "编辑成功";
    config.value.title = "编辑回答";
    config.value.form = {
      formData: {
        id: initData.id,
        content: initData.content,
        answerImgModels: initData.answerImgModels,
        answerFileModels: initData.answerFileModels,
        questionId
      },
      rules: {
        content: [{ required: true, message: "请填写回答内容" }],
        answerImgModels: [{ required: true, message: "请上传回答图片" }]
      }
    };
    config.value.column = [
      {
        type: "input",
        key: "content",
        formItemAttribute: {
          label: "回答内容"
        },
        attributes: {
          placeholder: "请填写回答内容",
          type: "textarea",
          rows: 5
        }
      },
      {
        type: "file",
        key: "answerImgModels",
        formItemAttribute: {
          label: "回答图片"
        },
        attributes: {
          "prefix-data": QA,
          multiple: true,
          showFileList: true,
          limit: 30,
          width: "140px",
          height: "140px",
          type: "image",
          listType: "picture-card",
          fileType: ["image/jpeg", "image/png", "image/gif"]
        }
      },
      {
        type: "fileSlice",
        key: "answerFileModels",
        formItemAttribute: {
          label: "上传附件文件"
        },
        attributes: {
          "prefix-data": QA,
          "limit-number": 100,
          accept: "*",
          success: data => {
            console.log(data);
          }
        }
      }
    ];
    config.value.api = updateAnswer;
    config.value.transformData = (data: any) => {
      console.log(data);
      data.answerImgModels = data.answerImgModels.map((item: any) => {
        return {
          name: item.originalFileName || item.name,
          path: item.path
        };
      });
      data.answerFileModels = data.answerFileModels.map((item: any) => {
        return {
          name: item.originalFileName || item.name,
          path: item.path
        };
      });

      return data;
    };
    dialogForm({
      config: config.value,
      drawerVisible: drawerVisible.value,
      successCallback: () => {
        initAnswer();
      }
    });
  };

  // 删除回答
  const deleteAnswer = async (id: string) => {
    await useHandleData(deleteAnswerApi, { id }, `删除回答`);
    initAnswer();
  };

  // 采纳回答

  const adoptAnswer = async (id: string) => {
    try {
      await adoptAnswerApi({ id });
      ElMessage.success("采纳成功");
      initAnswer();
    } catch (error) {
      console.log(error);
    }
  };

  return {
    addAnswer,
    editAnswer,
    deleteAnswer,
    adoptAnswer
  };
};
